<template>
  <el-table
    :data="tableData"
    style="overflow: visible"
    border
    :show-header="showHeader"
    :span-method="spanMethod ? arraySpanMethod : null"
    :row-style="rowStyle ? leaderStyle : {}"
    empty-text=" "
  >
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column prop="devSn" label="车台号" width="65" align="center">
      <template slot-scope="{ row }">
        <div v-html="getSeiresDevsn(row['devSnArea'])"></div>
      </template>
    </el-table-column>
    <el-table-column prop="pz" label="品种" width="180" align="center" />
    <el-table-column prop="name" label="姓名" width="80" align="center" />
    <el-table-column prop="gh" label="工号" width="100" align="center" />
    <el-table-column
      prop="current_work_type"
      label="工种"
      width="100"
      align="center"
    >
      <template slot-scope="{ row }">
        <el-row type="flex" align="middle">
          <!-- <el-row
            v-if="type == '落纱' && $index == 0"
            type="flex"
            align="middle"
          >
            <img
              style="margin-right:5px"
              src="@/assets/img/dispatch/leader.png"
              width="15"
              height="15"
            />
            <span style="white-space:nowrap">{{ row.current_dh }}：</span>
          </el-row> -->
          <el-select
            v-model="row.current_work_type"
            size="small"
            @change="() => editPerson(row, 'current_work_type')"
          >
            <el-option
              v-for="(item, index) in wtOptionChange(row['current_gongxu'])"
              :key="index"
              :label="item['key_value']"
              :value="item['key_value']"
            ></el-option>
          </el-select>
        </el-row>
      </template>
    </el-table-column>
    <el-table-column
      label="设备名称"
      width="80"
      :align="type == '收砣' || type == '理纱' ? 'left' : 'center'"
    >
      <template slot-scope="{ row }">
        <div style="font-size: 15px; color: #292b3d" v-if="type == '收砣'">
          数量：
          <el-input-number
            size="small"
            v-model="row.num"
            :controls="null"
            placeholder="请输入数量"
            style="
              border-radius: 2px;
              border: 1px solid #cfd4d8;
              background: #f8f9fb;
            "
          />
          架
        </div>
        <div style="font-size: 15px; color: #292b3d" v-else-if="type == '理纱'">
          数量：
          <el-input-number
            size="small"
            v-model="row.num"
            :controls="null"
            placeholder="请输入数量"
            style="
              border-radius: 2px;
              border: 1px solid #cfd4d8;
              background: #f8f9fb;
            "
          />
          框
        </div>
        <div v-else>
          {{ row['current_gongxu'] }}
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="devSum"
      label="设备总台数"
      width="105"
      align="center"
    />
    <el-table-column label="定额测算" align="center" width="120" />
    <el-table-column label="锭数" width="150" align="center">
      <template slot-scope="{ row }">
        <el-row type="flex" align="middle" justify="space-between">
          <div v-html="getSeiresDs(row['dsArea'])"></div>
          <div class="add-btn" @click="showDialog(row)">+</div>
        </el-row>
      </template>
    </el-table-column>
    <el-table-column label="开始时间" width="90" align="center">
      <template slot-scope="{ row }">
        <el-time-picker
          v-model="row.start_time"
          size="small"
          editable
          :disabled="startDisabled"
          :clearable="false"
          format="HH:mm"
          value-format="HH:mm"
          :picker-options="{
            selectableRange: `00:00:00 - ${
              row.end_time ? row.end_time.split(' ')[1] : '23:59:00'
            }`,
          }"
          @change="() => editPerson(row, 'start_time')"
          @focus="endDisabled = true"
          @blur="endDisabled = false"
        >
        </el-time-picker>
      </template>
    </el-table-column>
    <el-table-column label="结束时间" width="90" align="center">
      <template slot-scope="{ row }">
        <el-time-picker
          v-model="row.end_time"
          size="small"
          editable
          :clearable="false"
          format="HH:mm"
          :disabled="endDisabled"
          value-format="HH:mm"
          :picker-options="{
            selectableRange: `${
              row.start_time ? row.start_time.split(' ')[1] : '00:00:00'
            } - 23:59:00`,
          }"
          @change="() => editPerson(row, 'end_time')"
          @focus="startDisabled = true"
          @blur="startDisabled = false"
        >
        </el-time-picker>
      </template>
    </el-table-column>
    <el-table-column label="考勤状态" width="102" align="center">
      <div class="tag-select" slot-scope="{ row, col, $index }">
        <el-select
          v-model="row.status"
          size="small"
          @change="() => editPerson(row, 'status')"
        >
          <el-option
            v-for="(item, index) in kqOption"
            :key="index"
            :label="item['key_value']"
            :value="item['key_value']"
            style="margin-bottom: 5px"
          >
            <el-tag :type="item['key_name']">{{ item['key_value'] }}</el-tag>
          </el-option>
        </el-select>
        <div class="tag">
          <el-tag :type="tagFilter(row.status, 'key_value', 'key_name')">{{
            row.status
          }}</el-tag>
        </div>
      </div>
    </el-table-column>
    <el-table-column prop="remarks" label="备注" align="center" min-width="150">
      <template slot-scope="{ row }">
        <el-input
          type="small"
          v-model="row.remarks"
          @change="() => editPerson(row, 'remarks')"
        ></el-input>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="64" align="center">
      <div class="table-btn" slot-scope="{ row }">
        <el-button type="text" @click="delPerson(row)">移出</el-button>
      </div></el-table-column
    >
    <l-dialog ref="dialog" :date="date" @getData="getData"></l-dialog>
  </el-table>
</template>

<script>
import { editScheduleLt, delSchedule } from '@/api/dispatch';
import lDialog from './dialogLt.vue';
export default {
  components: { lDialog },
  props: {
    // 工种
    type: {
      type: String,
      default: '',
    },
    // 班次/车间信息等
    search: {
      type: Object,
      default: function () {
        return {};
      },
    },
    wtOption: {
      type: Array,
      default: function () {
        return [];
      },
    },
    tableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    showHeader: {
      type: Boolean,
      default: false,
    },
    // 表格是否有合并
    spanMethod: {
      type: Boolean,
      default: false,
    },
    // 传入数据的行合并
    areaArr: {
      type: Array,
      default: function () {
        return [];
      },
    },
    rowStyle: {
      type: Boolean,
      default: false,
    },
    date: {
      type: String,
    },
  },
  data() {
    return {
      startDisabled: false,
      endDisabled: false,
    };
  },
  computed: {
    kqOption() {
      return this.$store.getters.kqOption;
    },
  },
  methods: {
    showDialog(row) {
      this.$refs.dialog.show(row);
    },
    // 修改相关人员信息
    async editPerson(row, editParams) {
      console.log(row);
      let params = this.$_.pick(row, [
        'gh',
        'pz',
        'cj',
        'idLt',
        'bc',
        editParams,
      ]);
      params.time = this.date;
      console.log(row.devSnArea ? row.devSnArea[0] : row.devSn);
      // params.devSn = row.devSnArea ? row.devSnArea[0] : row.devSn;
      params.devSn = row.devSnArea ? row.devSnArea[0] : row.devSn;
      if (editParams == 'start_time' || editParams == 'end_time') {
        params[editParams] = `${params.time} ${params[editParams]}:00`;
      }
      const res = await editScheduleLt(params);
      if (res.code == 1) {
        this.$message.success('修改成功');
        if (
          editParams == 'current_work_type' ||
          editParams == 'start_time' ||
          editParams == 'end_time'
        ) {
          this.getData();
        }
      }
    },
    // 移除人员
    async delPerson(row) {
      let params = {
        bc: this.search.bc,
        cj: row.cj,
        current_gongxu: row.current_gongxu,
        current_work_type: row.current_work_type,
        gh: row.gh,
        org: row.org,
        idLt: row.idLt,
        id: row.id,
        devSn: row.devSnArea ? row.devSnArea[0] : null,
        time: this.date,
      };
      const res = await delSchedule(params);
      if (res.code == 1) {
        this.$message.success('操作成功');
        this.getData(row.current_work_type);
      }
    },
    getData() {
      this.$parent.getSchedule();
    },
    tagFilter(val, valueType, type) {
      if (val && val !== '' && type) {
        let text = this.kqOption.find((item) => {
          return item[valueType] == val;
        });
        if (text) {
          return text[type];
        } else {
          return 'default';
        }
      }
    },
    // 队长行合并
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.type == '收砣') {
        if (columnIndex === 4) {
          return [1, 12];
        } else if (columnIndex > 4) {
          return [0, 0];
        }
      } else if (this.type == '打包') {
        // 总计行
        if (columnIndex === 1 || columnIndex === 0) {
          const row1 = this.areaArr[rowIndex];
          const col1 = row1 > 0 ? 1 : 0;
          return {
            rowspan: row1,
            colspan: col1,
          };
        }
      } else if (this.type == '清洁') {
        if (columnIndex === 4) {
          return [1, 8];
        } else if (columnIndex > 4 && columnIndex < 12) {
          return [0, 0];
        }
      } else if (this.type == '挡车') {
        if (columnIndex > 2 && columnIndex < 9) {
          const row1 = this.areaArr[rowIndex];
          const col1 = row1 > 0 ? 1 : 0;
          return {
            rowspan: row1,
            colspan: col1,
          };
        }
      }
    },
    leaderStyle({ row, rowIndex }) {
      if (rowIndex == 0) {
        return { background: '#F6F9FF' };
      }
    },
    // 获取连续车台
    getSeiresDevsn(arr) {
      if (arr) {
        var result = [],
          i = 0,
          str = '';
        if (arr.length > 0) {
          result[i] = [arr[0]];
          arr.reduce(function (prev, cur) {
            parseInt(cur) - parseInt(prev) == 1
              ? result[i].push(cur)
              : (result[++i] = [cur]);
            return cur;
          });
          result.map((item) => {
            if (item.length > 1) {
              str += `#${item[0]}~#${item[item.length - 1]}<br>`;
            } else {
              str += `#${item[0]}<br>`;
            }
          });
        } else {
          str = '';
        }
        return str;
      }
    },
    // 获取连续Ds
    getSeiresDs(arr) {
      if (arr) {
        var result = [],
          i = 0,
          str = '';
        if (arr.length > 0) {
          result[i] = [arr[0]];
          arr.reduce(function (prev, cur) {
            parseInt(cur) - parseInt(prev) == 1
              ? result[i].push(cur)
              : (result[++i] = [cur]);
            return cur;
          });
          result.map((item) => {
            if (item.length > 1) {
              str += `${item[0]} - ${item[item.length - 1]}锭、`;
            } else {
              str += `#${item[0]}锭、`;
            }
          });
          str = str.substring(0, str.length - 1);
        } else {
          str = '';
        }
        return str;
      }
    },
    wtOptionChange(gongxu) {
      let arr = [];
      if (this.wtOption) {
        if (this.wtOption[0]['arr']) {
          let gx = this.wtOption.filter((item) => {
            return item.name == gongxu;
          });
          arr = gx[0]['arr'];
        } else {
          arr = this.wtOption;
        }
      }
      return arr;
    },
  },
};
</script>

<style></style>
